<template>
    <div class="layout-header__placeholder"></div>
    <div class="layout-header">
        <div class="layout-header__main">
            <NuxtLink to="/" class="layout-header__logo">
                <img :src="`${_oss_}images/logo.png`" alt="北京华锐云空间" />
            </NuxtLink>

            <div class="layout-header__menus">
                <template v-for="item in Menus" :key="item.name">
                    <div class="menu-sub" v-if="item.children && item.children.length && item.show
                        ">
                        <div class="menu-item" :class="{
                            active: IsActive(item),
                        }">
                            {{ item.name }}
                            <el-icon size="16">
                                <ArrowDown />
                            </el-icon>
                        </div>

                        <div class="menu-child">
                            <div class="menu-child__list">
                                <template v-for="cItem in item.children" :key="cItem.name">
                                    <NuxtLink :prefetch="false" :to="cItem.path" class="menu-child__item" :class="{
                                        active: IsActive(cItem),
                                    }">
                                        {{ cItem.name }}
                                    </NuxtLink>
                                </template>
                            </div>
                        </div>
                    </div>

                    <NuxtLink :prefetch="false" class="menu-item" :class="{
                        active: IsActive(item),
                    }" :to="item.path" v-else-if="item.path && item.show">
                        {{ item.name }}
                    </NuxtLink>

                    <div class="menu-item" v-else-if="item.click && item.show" @click="item.click">
                        {{ item.name }}
                    </div>
                </template>
            </div>

            <div class="layout-header__end">
                <div class="vip-center" @click="jumpPath('/buyDetail.html')">
                    <img :src="`${_oss_}images/vip.png`" />
                    会员中心
                </div>

                <el-popover placement="bottom" :width="40" trigger="hover" popper-class="msg-popover">
                    <template #reference>
                        <div class="message" :class="{
                            'is-dot': Object.values(
                                userStore.messageLog
                            ).some(Boolean),
                        }">
                            消息
                        </div>
                    </template>
                    <div class="msg-popver-content">
                        <div class="msg-popver-item" :class="{
                            'is-dot': userStore.messageLog.isComment,
                        }" @click="jumpPath('/message/1.html', true)">
                            评论
                        </div>
                        <div class="msg-popver-item" :class="{ 'is-dot': userStore.messageLog.isLike }"
                            @click="jumpPath('/message/2.html', true)">
                            点赞
                        </div>
                        <div class="msg-popver-item" :class="{ 'is-dot': userStore.messageLog.isStar }"
                            @click="jumpPath('/message/3.html', true)">
                            收藏
                        </div>
                        <div class="msg-popver-item" :class="{ 'is-dot': userStore.messageLog.isDialogue }"
                            @click="jumpPath('/message/5.html', true)">
                            私信
                        </div>
                        <div class="msg-popver-item" :class="{ 'is-dot': userStore.messageLog.isFollow }"
                            @click="jumpPath('/message/6.html', true)">
                            关注
                        </div>
                        <div class="msg-popver-item" :class="{ 'is-dot': userStore.messageLog.isNotice }"
                            @click="jumpPath('/message/4.html', true)">
                            系统通知
                        </div>
                    </div>
                </el-popover>

                <!-- 搜索 -->
                <!-- <el-icon
                    class="search-btn"
                    :class="{
                        active: dialogStore.isSearchDialogVisible,
                    }"
                    size="16"
                    @click="dialogStore.isSearchDialogVisible = true"
                >
                    <Search />
                </el-icon> -->

                <ClientOnly>
                    <el-popover placement="bottom" :width="200" trigger="hover" popper-class="user-popover"
                        v-if="userStore.isLogin">
                        <template #reference>
                            <div class="personal-center" @click="jumpPath('/admin.html')">
                                <img class="avatar" :src="userStore.avatar
                                    ? userStore.avatar
                                    : `${_oss_}images/user/default-avatar.png`
                                    " />
                                个人中心
                            </div>
                        </template>
                        <div class="popver-content">
                            <div class="popver-content__top">
                                <div class="popver-content-avatar" @click="GoToAdmin">
                                    <img :src="userStore.avatar
                                        ? userStore.avatar
                                        : `${_oss_}images/user/default-avatar.png`
                                        " />
                                </div>
                                <div class="popver-content-mobile" @click="GoToAdmin">
                                    {{ mobile }}
                                </div>
                            </div>
                            <div class="popver-content__mid">
                                <div class="popver-content__mid-item" @click="GoToScoreList">
                                    <div class="mid-item__top">
                                        {{
                                            userStore.midNum.score_num > 999
                                            ? "999+"
                                            : userStore.midNum.score_num
                                        }}
                                    </div>
                                    <div class="mid-item__bottom">积分</div>
                                </div>
                                <div class="popver-content__mid-item" @click="GoToMidList(0)">
                                    <div class="mid-item__top">
                                        {{
                                            userStore.midNum.like_num +
                                            userStore.midNum.case_like_num
                                        }}
                                    </div>
                                    <div class="mid-item__bottom">点赞</div>
                                </div>
                                <div class="popver-content__mid-item" @click="GoToMidList(1)">
                                    <div class="mid-item__top">
                                        {{
                                            userStore.midNum.star_num +
                                            userStore.midNum.case_star_num
                                        }}
                                    </div>
                                    <div class="mid-item__bottom">收藏</div>
                                </div>
                            </div>
                            <div class="popver-item btn" @click="onQuit">
                                <img class="icon" :src="`${_oss_}images/icon-quit.svg`" />
                                退出
                            </div>
                        </div>
                    </el-popover>
                    <div @click="onLogin" class="login-btn" v-else>
                        登录/注册
                    </div>
                </ClientOnly>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ArrowDown, Search } from "@element-plus/icons-vue";
import { GetMenus } from ".";
import { UserLogout } from "~/api";
import { useMobile } from "@/hooks";
import { connectSocket } from "~/utils/socket";

const route = useRoute();
const userStore = useUserStore();
const dialogStore = useDialogStore();
const Menus = GetMenus();
const mobile = useMobile();

const IsActive = (item) => {
    if (item.children && item.children.length) {
        return item.children.findIndex((c) => c.path === route.path) !== -1;
    } else {
        return route.path === item.path;
    }
};

const jumpPath = (path, isLogin = false) => {
    if (isLogin && !userStore.isLogin) {
        LoginModal(true, { url: path }, {}, true);
        return false;
    }
    path && navigateTo(path);
};

const onQuit = async () => {
    await UserLogout();
    userStore.CLEAR_USERINFO();
    navigateTo("/");
    connectSocket();
};

const GoToMidList = (type) => {
    dialogStore.isMidListDialogVisible = true;
    dialogStore.midListType = type;
};

const GoToScoreList = () => {
    navigateTo("/admin/score.html");
};

const GoToAdmin = () => {
    navigateTo("/admin.html");
};

const onLogin = () => {
    LoginModal();
}
</script>

<style lang="scss">
.user-popover {
    padding: 0 !important;
}

.msg-popover {
    min-width: 90px !important;
    padding: 0 !important;
}
</style>

<style lang="scss" scoped>
.layout-header {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    background-color: #fff;
    height: 70px;
    z-index: 99;

    &__placeholder {
        height: 70px;
    }

    &__main {
        display: flex;
        align-items: center;
        width: 1200px;
        height: 100%;
        margin: 0 auto;
    }

    &__logo {
        margin-left: 13px;
        cursor: pointer;
        user-select: none;

        img {
            width: 145px;
            height: auto;
        }
    }

    &__menus {
        display: flex;
        align-items: center;
        margin-left: 40px;
        font-size: 16px;
        color: #333;

        .menu-sub {
            position: relative;

            &:hover {
                .el-icon {
                    transform: rotate(180deg);
                }

                .menu-item {
                    color: #5085fb;
                }

                .menu-child {
                    display: block;
                }
            }

            .menu-child {
                position: absolute;
                display: none;
                padding-top: 10px;
                z-index: 99999;
                left: calc(50% - 20px);
                transform: translateX(-50%);

                &__list {
                    padding: 8px 12px;
                    background-color: #fff;
                    border-radius: 4px;
                    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
                }

                &__item {
                    display: inline-block;
                    padding: 8px 0;
                    cursor: pointer;
                    white-space: nowrap;
                    color: #333;
                    text-decoration: none;

                    &:hover,
                    &.active {
                        color: #5085fb;
                    }
                }
            }
        }

        .menu-item {
            margin-right: 25px;
            cursor: pointer;
            user-select: none;
            display: flex;
            align-items: center;
            color: #333;
            text-decoration: none;
            font-size: 16px;

            .el-icon {
                margin-left: 4px;
                transition: all 0.2s;
            }

            &.active,
            &:hover {
                color: #5085fb;
            }
        }
    }

    &__end {
        display: flex;
        align-items: center;
        margin-left: auto;

        .vip-center {
            display: flex;
            align-items: center;
            font-size: 14px;
            cursor: pointer;
            user-select: none;
            margin-right: 20px;
        }

        .search-btn {
            margin-right: 20px;
            cursor: pointer;

            --color: #000;

            &:hover,
            &.active {
                --color: #5085fb;
            }
        }

        .message {
            margin-right: 20px;
            font-size: 14px;
            cursor: pointer;

            &.is-dot {
                position: relative;

                &::after {
                    content: "";
                    position: absolute;
                    top: -2px;
                    right: -5px;
                    width: 5px;
                    height: 5px;
                    border-radius: 50%;
                    background-color: #f00;
                }
            }
        }

        .personal-center {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100px;
            height: 30px;
            background-color: #cbd6f1;
            color: #333333;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            user-select: none;

            .avatar {
                width: 20px;
                height: 20px;
                border-radius: 4px;
                margin-right: 7px;
            }
        }
    }
}

.login-btn {
    font-size: 14px;
    color: #5085fb;
    cursor: pointer;
    text-decoration: none;
}

.msg-popver-content {
    padding: 10px 0;

    .msg-popver-item {
        display: inline-box;
        text-align: center;
        line-height: 30px;
        cursor: pointer;

        &.is-dot {
            position: relative;

            &::after {
                content: "";
                position: absolute;
                top: 5px;
                right: 14px;
                width: 5px;
                height: 5px;
                border-radius: 50%;
                background-color: #f00;
            }
        }

        &:hover {
            background-color: rgba(100, 100, 100, 0.12);
        }
    }
}

.popver-content {
    padding-top: 20px;

    &__top {
        text-align: center;
        margin-bottom: 10px;

        .popver-content-avatar {
            display: inline-block;
            width: 50px;
            height: 50px;
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .personal-center-mobile {
            margin-top: 10px;
            cursor: pointer;
        }
    }

    &__mid {
        display: flex;
        padding: 10px 0;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;

        &-item {
            flex: 1;
            text-align: center;
            cursor: pointer;

            .mid-item__top {
                font-size: 20px;
                font-weight: bold;
                color: #333;
            }

            .mid-item__bottom {
                margin-top: 6px;
                font-size: 14px;
                color: #888;
            }
        }
    }

    .popver-item {
        display: flex;
        align-items: center;
        text-align: left;
        height: 40px;
        padding-left: 10px;

        &:hover {
            background-color: #f0f0f5;
        }

        &.btn {
            color: #515151;
            cursor: pointer;
            user-select: none;

            img {
                width: 16px;
                margin-right: 6px;
            }
        }
    }
}
</style>
